<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">{{$route.meta.title}}-码头</div>
      <div class="extra fr">
        <el-alert
          show-icon
          v-show="isEdit"
          :title="msg"
          type="success"
          :closable="false"
          style="padding: 2px 16px; font-size: 14px;">
        </el-alert>
      </div>
    </div>

    <div class="app-container margin-content padding-content">
      <div class="header clearfix">
        <div class="title"> 第一步：生成查验费用报表</div>
        <div style="height:30px"></div>
        <el-form
          :model="dataForm"
          ref="dataForm"
          style="width:600px;margin-left:20px;"
          inline>

          <el-form-item prop="month" label="生成月份" style="margin-bottom: 0;">
            <el-date-picker
              type="month"
              value-format="yyyy-MM"
              v-model="dataForm.month"
              clearable
              :editable="false"
              :picker-options="pickerOptions"
              placeholder="选择月份"
              style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleReport">生成报表</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <div class="app-container margin-content padding-content">
      <div class="header clearfix">
        <div class="title">第二步：送审查验费用记录</div>
        <div style="height:20px"></div>
        <el-table
          :key="tableKey"
          :data="tableData"
          v-loading="loading"
          element-loading-text="正在加载..."
          :highlight-current-row="true"
          :max-height="scrollHeight"
          style="width: 100%;">

          <el-table-column label="送审月份" property="statisticsMonth"/>
          <el-table-column label="生成时间" property="createdtimeDesc"/>
          <el-table-column label="状态" property="reportStatus">
            <template slot-scope="scope">
              {{scope.row.reportStatus | reportStatusFilter}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a @click="handleSubmit({ month: dataForm.month, portId:scope.row.portId, statisticsId: scope.row.id})"
                 v-if="scope.row.reportStatus === 1">送审</a>
              <div v-else style="color:#ccc">暂无操作</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <cost-template
      :btnText="'送审'"
      ref="costTemplate"
      :identity="5"
      :next="0"
      :operation="[10,11]"
      re-send>

      <div slot="header" class="header" style="margin-top: -14px;">
        <div class="title">第三步：查看送审历史</div>
      </div>
    </cost-template>

    <report-dialog ref="reportDialog" v-if="reportDialogVisible" @refresh="_getReportByMonth"></report-dialog>
  </div>
</template>

<script>
  // api
  import { getReportByMonth, createReport } from '@/api/statistics'
  // utils
  import { getPreMonth } from '@/utils'
  // vuex
  import { mapMutations } from 'vuex'
  // components
  import Audit from '@/components/Audit'
  import CostTemplate from '@/components/CostTemplate'
  import ReportDialog from '@/components/ReportDialog'

  export default {
    name: 'costSend',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        dataForm: {
          month: '',
        },
        sendVisible: false,
        pickerOptions: {
          disabledDate(time) {
            const d = new Date()
            const pre = d.setMonth(d.getMonth() - 1)
            return time.getTime() > pre
          }
        },
        isEdit: false,
        reviewStatus: null,
        scrollHeight: 0,
        reportDialogVisible: false
      }
    },
    computed: {
      msg() {
        let _msg = ''
        switch (parseInt(this.reviewStatus)) {
          case 1:
            _msg = '该月统计数据已送审，请查看送审历史。'
            break
          case 2:
            _msg = '该月有未确认的查验操作，请先确认查验操作。'
            break
        }
        return _msg
      }
    },
    created() {
      this.tableResize()
      this._getReportByMonth()
    },
    methods: {
      tableResize(h = 285) {
        this.scrollHeight = document.body.scrollHeight - h
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - h
        }
      },
      _getReportByMonth() {
        this.loading = true
        getReportByMonth(this.dataForm).then((res) => {
          this.tableData = res.data.data
          this.$refs.costTemplate.handleMonthChange()
          this.loading = false
        })
      },
      handleReport() {
        if (!this.dataForm.month) {
          this.$message({
            message: '请输入月份',
            type: 'warning'
          })
          return false
        }
        createReport(this.dataForm).then((res) => {
          if (res.data.data) {
            if (res.data.data.reviewStatus === 1) {
              this.$message({
                message: '正在生成中，请耐心等候。',
                type: 'warning',
                onClose: () => {
                  this._getReportByMonth()
                }
              })
            } else {
              this.$message({
                message: '当前月份已经送审，不能重复生成。',
                type: 'warning',
                onClose: () => {
                  this._getReportByMonth()
                }
              })
            }

          } else {
            this.$message({
              message: '生成成功。',
              type: 'success',
              onClose: () => {
                this._getReportByMonth()
              }
            })
          }
        })
      },
      handleSubmit({ month, portId, statisticsId }) {
        this.reportDialogVisible = true
        this.$nextTick(() => {
          this.$refs['reportDialog'].init({ month, portId, statisticsId })
        })
      },
      ...mapMutations({
        setCurrentId: 'SET_CURRENTID'
      })
    },
    components: {
      Audit,
      CostTemplate,
      ReportDialog
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .app-container.padding-content {
    padding-top: 0 !important;
  }
</style>
